<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="国家">
        <el-input v-model="formInline.country" placeholder="National English Name"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <Table :tableData="tableData" v-show="showTab"></Table>
  </div>

</template>

<script>
import Table from "@/components/Table";
import Element from 'element-ui'

export default {
  name: "Search",
  components:{
    Table
  },
  data() {
    return {
      formInline: {
        country: ''
      },
      tableData: [],
      showTab: false
    }
  },
  methods: {
    onSubmit() {
      this.$axios.get("/"+this.formInline.country).then(res=>{
        console.log(res);
        if(res.data.code === 400){
          Element.Message.error(res.data.msg);
          return -1;
        }
        Element.Message.success("查找成功！")
        this.showTab = true;
        var lists = res.data.data.map(item => {
          return {
            state: item.state,
            country: item.country,
            total: item.latestTotalCases,
            add: item.diffFromPrevDay
          }
        });
        // console.log(lists);
        this.tableData = lists;
      })
    }
  }
}
</script>

<style scoped>

</style>
